<template>
    <div>
        <el-dialog v-model="dialogFormVisible" :title="Toptitle">
            <el-form :model="form" ref="ruleFormRef" :rules="rules">
                <el-form-item label="角色名称" :label-width="formLabelWidth" prop="title">
                    <el-input v-model="form.rolename" autocomplete="off" />
                </el-form-item>
                <el-form-item label="角色权限" :label-width="formLabelWidth">
                    <el-tree :data="menulist" @check="tree" ref="treeref" default-expand-all show-checkbox node-key="id"
                        :props="defaultProps" />
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="add">提交</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script  lang="ts" setup>
import { reactive, ref, defineExpose, computed } from 'vue'
import { useStore } from 'vuex'
import type { FormInstance, FormRules } from 'element-plus'
import { roleadd, roleinfo, menuedit } from '../../request/app'
import emitter from '@/assets/JS/mybus'





const defaultProps = {
    children: 'children',
    label: 'title',
}




// 昨晚---
// 我揉碎了漫天的星光,
// 化作清晨的一抹朝霞.
// 将温柔藏匿于微风中,
// 轻拂过你娇嫩的脸颊.




// 树形控件选择
let tree = (e: any, checkedNodes: any) => {
    // console.log(checkedNodes.checkedKeys.join(','));
    form.value.menus = checkedNodes.checkedKeys.join(',')
}
let treeref = ref()

const form = ref({
    rolename: '',
    menus: [],
    status: 1,
})
let isflag = ref(true)
let isID = ref<any>(null)

const ruleFormRef = ref<FormInstance>()
let Toptitle = ref('添加菜单')
const store = useStore()

// 派遣行动加载树形结构列表
async function shoppatch() {
    await store.dispatch('setshop/ACgetlist')
}
shoppatch()

// 派遣行动加载结构列表
async function peoplepatch() {
    await store.dispatch('setpeople/ACgetlist')
}
peoplepatch()


// 获取数据列表
var menulist = computed(() => store.getters["setshop/getlist"]);
const peoplelist = computed(() => store.getters["setpeople/getlist"]);

const rules = reactive<FormRules>({
    title: [
        { required: true, message: '请输入菜单名称', trigger: 'blur' },
    ],
})

// 兄弟触发事件
const dialogFormVisible = ref<boolean>(false)
const formLabelWidth = '140px'

function addtost(): void {
    Toptitle.value = '添加菜单'
    isflag.value = true
    dialogFormVisible.value = true
}
defineExpose({
    addtost
})
// 打开修改弹框
emitter.on("iseditId", id => {
    dialogFormVisible.value = true;
    Toptitle.value = '修改菜单'
    isflag.value = false
    isID.value = id
    console.log(id);
    roleinfo({ id }).then((res: any) => {
        // console.log(res.data.list);
        // console.log(res.data.list.menus.split(','));
        form.value = res.data.list
        console.log(form);
        console.log(treeref, '000000000000');
        console.log(treeref.value.$refs);
        treeref.value.setCheckedKeys(res.data.list.menus.split(','))
    })

})

// 点击确认时的修改时间
function add() {
    dialogFormVisible.value = false;
    console.log(form);

    if (isflag.value) {
        console.log(form.value, '添加');
        roleadd(form.value).then(res => {
            console.log(res);
            peoplepatch()
        })
    } else {
        console.log(form.value, '修改');
        menuedit({
            id: isID.value,
            ...form.value
        }).then((res: any) => {
            console.log(res, '修改');
            peoplepatch()
        })

    }

}


</script>
<style scoped>
.el-button--text {
    margin-right: 15px;
}

.el-select {
    width: 300px;
}

.el-input {
    width: 300px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>
